<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<c:url value="/empleado.html" var="empleado"></c:url>
<html>
<head>
<title>Operarios</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<c:url value="/resources/css/bootstrap.css"/>" media="screen">
<link rel="stylesheet" href="<c:url value="/resources/css/jquery-ui.css"/>">
<script src="<c:url value="/resources/js/jquery.min.js"/>" type="text/javascript"></script>
<script src="<c:url value="/resources/js/jquery-1.10.2.js"/>" type="text/javascript"></script>
<script src="<c:url value="/resources/js/jquery-ui.js"/>" type="text/javascript"></script>
<script src="<c:url value="/resources/js/jquery.displaytag-ajax-1.2.js"/>" type="text/javascript"></script>
<script src="<c:url value="/resources/js/navegacion.js"/>"></script>

<script type="text/javascript">
	$( function(){
	   $("#bs-component").displayTagAjax();
	})

	$(document).ready(function() {
		 var dialog;
		//DIALOG
			dialog = $("#nuevaExperiencia").dialog({
		          modal: true,            
		          autoOpen: false,
		          width: 610,
		          height: 460,
		          buttons: {
		             "Cerrar": function() { 
		                         $(this).dialog("close");   
		                  },
		              "Guardar": function() {
		            	  		guardarExperiencia();
		            	  		$(this).dialog("close"); 
		            	  		
		            	  		$.get("<c:url value='empleado.html'/>", {accion : "buscarExperienciasEmpleado"},
										function(responseText, status,xmlHttpRequest) {
											$('#bs-component').html($('#bs-component',responseText).html());
										})
		                  }   
		              },
		          draggable: false,
		          resizable: false
		      });
		
			$("#nuevo").click(function() {
						  $('#nuevaExperiencia').html("<table height='100%'><tr><td><img src='<c:url value="/resources/css/images/loading.gif"/>'/>");
				          $('#nuevaExperiencia').load("<c:url value='experiencia.html'/>",{});
				          dialog.dialog("open");
					}
			)
			
			$("#guardar").click(function() {
				$("#accion").attr("value","guardarEmpleado");
				$("form").submit();
			})
	});
	
	
	
</script>


</head>
<body>

	<form id="cabecera" name="cabecera">
		<div class="navbar navbar-default">
			<div class="navbar-collapse collapse navbar-responsive-collapse">
				<ul class="nav navbar-nav">

					<c:forEach var="urlBean" items="${sessionListUrlBean}">
						<li><a onclick="redireccionar('${urlBean.url}')" href="#"><c:out
									value="${urlBean.nombre}" /></a></li>
					</c:forEach>

				</ul>
			</div>
		</div>
	</form>

	<form class="form-horizontal" id="cuerpo" name="cuerpo" action="${empleado}" method="post">
		<input type="hidden" id="accion" name="accion" />
		<div class="col-lg-9 col-lg-offset-2">
			<div class="well bs-component">
				<fieldset>
					<legend>Empleado</legend>
					<div class="form-group">
						<div class="row">
							<label for="inputNombre" class="col-lg-2 control-label">Nombre</label>
							<div class="col-lg-4">
								<input type="text" class="form-control" id="nombre"
									name="nombre" placeholder="Nombre del empleado">
							</div>
						</div>
						<div class="row">
							<label for="inputApePat" class="col-lg-2 control-label">Apellido
								paterno</label>
							<div class="col-lg-4">
								<input type="text" class="form-control" id="apellido_paterno"
									name="apellido_paterno" placeholder="Apellido paterno">
							</div>
						</div>
						<div class="row">
							<label for="inputApeMat" class="col-lg-2 control-label">Apellido
								materno</label>
							<div class="col-lg-4">
								<input type="text" class="form-control" id="apellido_materno"
									name="apellido_materno" placeholder="apellido materno">
							</div>
						</div>
						<div class="row">
							<label for="inputTipo" class="col-lg-2 control-label">Tipo
								documento</label>
							<div class="col-lg-4">
								<select class="form-control" id="tipo_doc" name="tipo_doc">
									<option>DNI</option>
									<option>CE</option>
								</select>
							</div>

							<label for="inputNroDoc" class="col-lg-2 control-label">Nro.
								documento</label>
							<div class="col-lg-3">
								<input type="text" class="form-control" id="nro_doc"
									name="nro_doc" placeholder="nro. de documento">
							</div>
						</div>

					</div>

					<div class="row">
						<div class="col-lg-12">
							<h4 class="list-group-item-heading">Experiencia</h4>
						</div>
					</div>
					<div class="form-group">
						<div class="col-lg-2">
							<button type="button" class="btn btn-primary" id="nuevo">Nuevo</button>
						</div>
					</div>

					<div class="row">
						<div class="col-lg-12">
							<div class="bs-component" id="bs-component">

								<c:set var="count" value="0" scope="page"/>
								<display:table name="sessionScope.empleadoListExperiencia" pagesize="10"
									id="empleado" requestURI="/empleado.html"
									class="table table-striped table-hover ">

									<display:column title="#">
										<c:set var="count" value="${count+1}" scope="page"/>
									</display:column>
									<display:column escapeXml="true" property="herramienta"
										title="Herramienta" />
									<display:column escapeXml="true" property="tiempo"
										title="Tiempo de uso" />
									<display:column escapeXml="true" property="calificacion"
										title="Calificacion" />
									<display:column escapeXml="true" property="observacion"
										title="Observacion" />
									<display:column>
										<button type="button" class="btn btn-primary">Modificar</button>
									</display:column>
									
								</display:table>

							</div>
						</div>
					</div>
					
					<div class="row">
					    <div class="col-lg-2 col-lg-offset-5"">
							<button type="button" class="btn btn-primary" id="guardar">Guardar</button>
						</div>
					</div>
				</fieldset>
			</div>
		</div>


	</form>


 <div id="nuevaExperiencia" title="Experiencia" >
 </div>  


</body>
</html>